<!-- src/components/CardComponent.vue -->
<template>
    <div class="card" :class="cardClass">
        <div v-if="card.type === 'number'" class="number-card">
            <div class="card-value">{{ card.value }}</div>
            <div class="card-type">数字</div>
        </div>

        <div v-else-if="card.type === 'action'" class="action-card">
            <div class="action-icon">
                <template v-if="card.actionType === 'ant'">🐜</template>
                <template v-else-if="card.actionType === 'spider'">🕷️</template>
                <template v-else-if="card.actionType === 'mosquito'">🦟</template>
                <template v-else-if="card.actionType === 'cockroach'">🪳</template>
            </div>
            <div class="card-type">{{ actionName }}</div>
        </div>

        <div v-else-if="card.type === 'moth'" class="moth-card">
            <div class="moth-icon">🦋</div>
            <div class="card-type">飞蛾</div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
    name: 'CardComponent',
    props: {
        card: {
            type: Object,
            required: true
        }
    },
    setup(props) {
        const actionName = computed(() => {
            switch (props.card.actionType) {
                case 'ant': return '蚂蚁'
                case 'spider': return '蜘蛛'
                case 'mosquito': return '蚊子'
                case 'cockroach': return '蟑螂'
                default: return '行动'
            }
        })

        const cardClass = computed(() => {
            return {
                'number': props.card.type === 'number',
                'action': props.card.type === 'action',
                'moth': props.card.type === 'moth',
                [props.card.actionType || '']: props.card.type === 'action'
            }
        })

        return {
            actionName,
            cardClass
        }
    }
})
</script>

<style lang="scss" scoped>
.card {
    width: 60px;
    height: 90px;
    border: 2px solid #34495e;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
    background-color: white;

    &.number {
        border-color: #3498db;
        background: linear-gradient(135deg, #d6eaf8 0%, #aed6f1 100%);
    }

    &.action {
        border-color: #9b59b6;
        background: linear-gradient(135deg, #d7bde2 0%, #bb8fce 100%);
    }

    &.moth {
        border-color: #e67e22;
        background: linear-gradient(135deg, #f8c471 0%, #f0932b 100%);
    }

    &.ant {
        background: linear-gradient(135deg, #e6b0aa 0%, #cd6155 100%);
    }

    &.spider {
        background: linear-gradient(135deg, #d5dbdb 0%, #a6a6a6 100%);
    }

    &.mosquito {
        background: linear-gradient(135deg, #f9e79f 0%, #f7dc6f 100%);
    }

    &.cockroach {
        background: linear-gradient(135deg, #85c1e9 0%, #3498db 100%);
    }

    .number-card,
    .action-card,
    .moth-card {
        text-align: center;
        width: 100%;

        .card-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .card-type {
            font-size: 10px;
            color: #555;
        }
    }

    .action-icon {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .moth-icon {
        font-size: 28px;
        margin-bottom: 5px;
    }
}
</style>